<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!--地图-->
<div class="layui-main" id="laotang" style="width: 800px; height:600px;"></div>

<!--表头-->
<div class="layui-main layui-nav">
  <div class="layui-row" style="height: 30px;line-height: 30px;">
    <div class="layui-col-md4">地区</div>
    <div class="layui-col-md2">累计确诊</div>
    <div class="layui-col-md2">最新确诊</div>
    <div class="layui-col-md2">治愈</div>
    <div class="layui-col-md2">死亡</div>
  </div>
</div>

<!--内容-->
<div class="layui-main">
  <div id="view" class="layui-collapse" lay-accordion>
    <div class="layui-colla-item layui-row">
      <h2 class="layui-colla-title">
        <span class="layui-col-md4">湖北</span>
        <span class="layui-col-md2">62032</span>
        <span class="layui-col-md2">40111</span>
        <span class="layui-col-md2">40111</span>
        <span class="layui-col-md2">40111</span>
      </h2>
      <div class="layui-colla-content">
        <table class="layui-table" lay-skin="nob">
          <colgroup>
            <col width="370">
            <col width="180">
            <col width="180">
            <col width="180">
            <col>
          <tbody>
          <tr>
            <td>武汉</td>
            <td>33333</td>
            <td>33333</td>
            <td>33333</td>
            <td>33333</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>




<script src="layui/layui.js"></script>
<script src="data.js"></script>

<script id="demo" type="text/html">
  {{#  layui.each(d.newslist, function(index, item){ }}
  <div class="layui-colla-item layui-row">
    <h2 class="layui-colla-title">
      <span class="layui-col-md4">{{ item.provinceName}}</span>
      <span class="layui-col-md2">{{ item.confirmedCount}}</span>
      <span class="layui-col-md2">{{ item.currentConfirmedCount}}</span>
      <span class="layui-col-md2">{{ item.curedCount}}</span>
      <span class="layui-col-md2">{{ item.deadCount}}</span>
    </h2>
    <div class="layui-colla-content">
      <table class="layui-table" lay-skin="nob">
        <colgroup>
          <col width="370">
          <col width="180">
          <col width="180">
          <col width="180">
          <col>
        <tbody>
        {{#  layui.each(item.cities, function(i, e){ }}
        <tr>
          <td>{{e.cityName}}</td>
          <td>{{e.confirmedCount}}</td>
          <td>{{e.currentConfirmedCount}}</td>
          <td>{{e.curedCount}}</td>
          <td>{{e.deadCount}}</td>
        </tr>
        {{#  }); }}
        </tbody>

      </table>
    </div>
  </div>
  {{#  }); }}
</script>

<script>
  layui.use('laytpl',function () {
    var laytpl=layui.laytpl;
    var getTpl=demo.innerHTML
        ,view=document.getElementById('view');
    laytpl(getTpl).render(data,function (html) {
      view.innerHTML=html
    });
  });
</script>

<script>
  //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  layui.use('element', function(){
    var element = layui.element;
  });
</script>

<script src="echarts.min.js"></script>
<script src="china.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<script>
    $.get("http://api.tianapi.com/txapi/ncovcity/index?key=5d4fb67d8bd16c1fd371311e334a4bd0",
        function (data, status) {
          // console.log(data); // data就是获取到的数据，输出到控制台查看
          var arr = [];
          // 处理数据，成地图需要的数据结构
          data.newslist.forEach(item => {
            // 循环的过程中，向空数组中加入所需的内容
            arr.push({
            name: item.provinceShortName, // name固定
            value: item.confirmedCount, // value固定
            zuixin: item.currentConfirmedCount, // 当前确诊
            zhiyu: item.curedCount,
            siwang: item.deadCount
          });
        });
          // 循环结束之后，我们就得到了地图需要的数据了。数据是arr，但是还稍微有点问题
          // 手动自行添加一个南海诸岛的数据
          arr.push({
            name: '南海诸岛', // name固定
            value: '未统计', // value固定
            zuixin: '未统计', // 当前确诊
            zhiyu: '未统计',
            siwang: '未统计'
          });
          // 到此为止，所有的数据全部处理好了。
          console.log(arr);

          // 下面开始做地图
          // 1. 初始化
          var myChart = echarts.init(document.getElementById('laotang'));

          // 2. 配置
          var option = {
            // 标题部分
            title: {
              text: '众志成城，抗击疫情',
              textStyle: {
                fontSize: 28
              },
              left: 'center', // 左右居中
              subtext: '小黄搭建',
              subtextStyle: {
                fontSize: 14
              }
            },
            // 设置地图及数据
            series: [{
              type: 'map',
              map: 'china', // 指定是中国地图
              data: arr, // 设置地图中的数据
              label: { // 控制默认显示省的名字
                show: true
              }
            }],
            tooltip: { // 鼠标悬浮提示
              formatter: function (params) { // 允许我们自定义悬浮提示的内容
                console.log(params);
                // return 你需要提示的内容
                return `累计确诊：${params.data.value}<br/>
                            当前确诊：${params.data.zuixin}<br/>
                            治愈：${params.data.zhiyu}<br/>
                            死亡：${params.data.siwang}<br/>
                            `;
              }
            },
            visualMap: {
              type: 'piecewise',
              pieces: [
                { gt: 10000 }, // 大于10000
                { gt: 5000, lte: 10000 },
                { gt: 1000, lte: 5000 },
                { gt: 500, lte: 1000 },  // (900, 1500]
                { gt: 100, lte: 500 },  // (310, 1000]
                { gt: 10, lte: 100 },   // (200, 300]
                { gt: 0, lte: 10 },       // (0, 10]
              ],
              inRange: {
                color: ['#ffcfc3', '#eda595', '#d27b64', '#d5462a', '#a8352e', '#6a211d', '#562a2a']
              }
            }
          };

          // 3. 生成地图
          myChart.setOption(option);
        });


</script>
</body>
</html>